<template>
  <div @click="show">
    <el-row style="background-color: #2d3d58" class="container">
      <el-col :span="6">
        <div class="grid-content bg-purple title-text">
          <span>自助洗车后台管理系统</span>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple-light">&nbsp;</div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple" style="color: #fff">
          <span> {{ currentDateTime }}&nbsp;{{ week }}</span>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple-light">
          <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" background-color="#2d3d58"
            text-color="#fff" active-text-color="#fff">
            <el-submenu index="2">
              <template v-slot:title>
                <el-avatar :size="35" :src="staffInfo.avatar"></el-avatar>
                &nbsp;&nbsp;&nbsp;&nbsp;Hello,&nbsp;&nbsp;&nbsp;&nbsp;
                {{ staffInfo.loginName }}
              </template>
              <el-menu-item index="2-1" type="text">
                <div @click.stop="open">个人中心</div>
              </el-menu-item>
              <el-menu-item index="2-2">
                <div @click.stop="changePass">修改密码</div>
              </el-menu-item>
              <el-menu-item index="2-3">
                <div @click.stop="logout">退出</div>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </div>
      </el-col>
    </el-row>
    <!--个人信息弹出框-->
    <el-row>
      <el-dialog :visible.sync="dialogFormVisible" :title="title">
        <el-form style="padding: 30px">
          <el-form-item label="用户账号:" :label-width="formLabelWidth">
            <el-input show-word-limit v-model="staffInfo.loginName" :disabled="inputStatus"></el-input>
          </el-form-item>
          <el-form-item label="用户名:" :label-width="formLabelWidth">
            <el-input show-word-limit v-model="staffInfo.userName" :disabled="inputStatus"></el-input>
          </el-form-item>
          <el-form-item label="用户性别:" :label-width="formLabelWidth">
            <el-input show-word-limit v-model="staffInfo.sex" :disabled="inputStatus"></el-input>
          </el-form-item>
          <el-form-item label="用户手机号:" :label-width="formLabelWidth">
            <el-input show-word-limit v-model="staffInfo.phonenumber" :disabled="inputStatus"></el-input>
          </el-form-item>
          <el-form-item label="邮箱:" :label-width="formLabelWidth">
            <el-input show-word-limit v-model="staffInfo.email" :disabled="inputStatus"></el-input>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-row>
    <!-- 修改密码对话框 -->
    <el-row>
      <el-dialog :title="title" :visible.sync="passFormVisible">
        <el-form :model="form" status-icon :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
          <el-form-item label="原始密码" prop="passOld">
            <el-input type="password" autocomplete="off" v-model="form.passOld" @blur="checkOldPassword('form')"
              show-password></el-input>
          </el-form-item>
          <el-form-item label="新的密码" prop="pass">
            <el-input type="password" v-model="form.pass" autocomplete="off" show-password></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input type="password" v-model="form.checkPass" autocomplete="off" show-password></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="cancel">取 消</el-button>
            <el-button @click="resetForm('form')" type="info">重置</el-button>
            <el-button type="primary" @click="submitForm('form')" :disabled="btnStatus">提交
            </el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "Header",
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.form.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else if (
        this.form.passOld === this.form.pass ||
        value === this.form.passOld
      ) {
        callback(new Error("不能和原密码一致!"));
      } else {
        callback();
      }
    };
    return {
      currentDateTime: "",//当前时间
      week: "",//星期几
      activeIndex2: "1", //导航栏默认激活
      staffInfo: {},//登录人信息对象
      dialogFormVisible: false,
      formLabelWidth: "120px",
      inputStatus: true,
      title: "",
      passFormVisible: false,
      btnStatus: true,
      form: { passOld: "", pass: "", checkPass: "" },
      // 表单校验
      rules: {
        password: [{ message: "", trigger: "blur" }],
        pass: [
          { required: true, message: "新密码不能为空", trigger: "blur" },
          { min: 3, max: 12, message: "长度在 3 到 12个字符", trigger: "blur" },
        ],
        checkPass: [
          { required: true, message: "确认密码不能为空", trigger: "blur" },
          { required: true, validator: equalToPassword, trigger: "blur" },
        ],
      },
    }
  },
  created() {
    this.currentTime();
    this.getWeek();
    this.initInfo();
  },
  methods: {
    //头部导航获取当前时间
    getTime: function () {
      //获取当前时间
      let currentDate = new Date();
      //获取到4位的年
      let yy = currentDate.getFullYear();
      let mm = currentDate.getMonth() + 1;
      let dd = currentDate.getDate();
      let hh = currentDate.getHours();
      let mf = currentDate.getMinutes() < 10
        ? "0" + currentDate.getMinutes()
        : currentDate.getMinutes();
      let ss = currentDate.getSeconds() < 10
        ? "0" + currentDate.getSeconds()
        : currentDate.getSeconds();
      this.currentDateTime = yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
    },
    //每隔0.5秒调用getTime属性
    currentTime() {
      setInterval(this.getTime, 500);
    },
    //获取星期几
    getWeek() {
      this.week = "星期" + "日一二三四五六".charAt(new Date().getDay());
    },
    clearValidate(formName) {
      this.$refs[formName].clearValidate();
    },
    //退出
    logout() {
      this.$http.get("/system/user/logout").then((res => {
        if (res.data.code === 200) {
          this.$notify({
            title: '提示信息',
            message: res.data.msg + "3秒后返回登陆页面",
            type: 'success',
            duration: 3000,
          });
          setTimeout(() => {
            //跳转到首页
            this.$router.push("/Login");
          }, 3000);
        } else {
          this.$message.error("系统错误");
        }
      }))
    },
    //修改密码
    submitForm() {
      console.log(this.form);
      if (this.form.pass === "" || this.form.checkPass === "") {
        return;
      }
      if (this.form.pass !== this.form.checkPass) {
        return;
      }
      this.$http.post("/user/people/api/modifyPass", this.form).then((res => {
        if (res.data.code === 200) {
          this.$notify({
            title: '提示信息',
            message: res.data.msg + "3秒后返回登陆页面",
            type: 'success',
            duration: 3000,
          });
          setTimeout(() => {
            //跳转到首页
            this.$router.push("/Login");
          }, 3000);
        } else {
          this.$message.error(res.data.msg);
        }
      }))
    },
    //检查输入的原来的密码是否正确
    checkOldPassword() {
      if (this.form.passOld === "" || this.form.passOld === undefined) {
        this.btnStatus = true;
        return;
      }
      this.$http.get("/user/people/api/checkPass?passOld=" + this.form.passOld).then((res => {
        if (res.data.code === 500) {
          this.$message.error(res.data.msg);
          this.btnStatus = true;
        } else {
          this.btnStatus = false;
        }
      }))
    },
    //修改密码
    changePass() {
      // this.resetForm();
      this.passFormVisible = true;
      //指定对话框标题
      this.title = "修改密码";
    },
    //重置表单
    resetForm() {
      this.clearValidate("form");
      this.form = {};
    },
    //取消修改密码
    cancel() {
      this.passFormVisible = false;
      this.resetForm();
    },
    //点击个人信息
    open() {
      this.dialogFormVisible = true;
      if (this.staffInfo.sex === 0) {
        this.staffInfo.sex = "男";
      } else if (this.staffInfo.sex === 1) {
        this.staffInfo.sex = "女";
      } else {
        this.staffInfo.sex = "未知";
      }
      //指定对话框标题
      this.title = "个人信息";
    },
    //初始化加载个人信息
    initInfo() {
      this.$http.get("/system/user/info").then((res => {
        if (res.data.code === 200) {
          this.staffInfo = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }));
    },
    //跳转主页面
    show() {
      this.$router.push("/show");
    },
  },
}
</script>
<style scoped>
.title-text {
  font-size: 25px;
  font-weight: bold;
  padding-top: 10px;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
}
</style>